import { prisma } from '@/lib/prisma';
import { notFound } from 'next/navigation';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { TripWithDetails, ActivityWithDestination } from '@/types/prisma';

async function getSharedTrip(code: string) {
  const trip = await prisma.trip.findUnique({
    where: {
      shareCode: code,
      isPublic: true,
    },
    include: {
      activities: {
        include: { destination: true },
        orderBy: { date: 'asc' },
      },
      user: {
        select: { name: true, username: true },
      },
    },
  });

  if (!trip) notFound();
  return trip;
}

export default async function SharedTripPage({
  params,
}: {
  params: { code: string };
}) {
  const trip = await getSharedTrip(params.code);

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      <div className="mb-8">
        <h1 className="text-3xl font-bold">{trip.title}</h1>
        <p className="text-gray-600 mt-2">
          {format(trip.startDate, 'yyyy年MM月dd日', { locale: zhCN })} -{' '}
          {format(trip.endDate, 'yyyy年MM月dd日', { locale: zhCN })}
        </p>
        <p className="text-sm text-gray-500 mt-1">
          由 {trip.user.name || trip.user.username} 分享
        </p>
      </div>

      <div className="space-y-6">
        {trip.activities.map((activity: ActivityWithDestination) => (
          <div
            key={activity.id}
            className="bg-white rounded-lg shadow p-4"
          >
            <div className="flex justify-between items-start">
              <div>
                <h3 className="font-medium">{activity.title}</h3>
                {activity.description && (
                  <p className="text-gray-600 mt-1">{activity.description}</p>
                )}
                {activity.destination && (
                  <p className="text-sm text-blue-600 mt-2">
                    📍 {activity.destination.name}
                  </p>
                )}
              </div>
              <time className="text-sm text-gray-500">
                {format(activity.date, 'HH:mm')}
              </time>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
} 